<template>
    <div class="component-login">
        <!-- <header class="header">
            <div class="left-view">
                <img class="icon" src="../../../assets/previous.png">
                <span>首页</span>
            </div>
            <div class="right-view">
                <span>注册</span>
            </div>
        </header> -->
        <div class="login-form">
            <div class="login-img">
                <img src="../../../assets/logo.svg">
            </div>
            <div class="form-input">
                <van-field
                    v-model="username"
                    required
                    clearable
                    placeholder="输入登录名"
                />
                <van-field
                    v-model="password"
                    type="password"
                    required
                    clearable
                    placeholder="输入密码"
                />
            </div>
            <div class="form-submit">
                <span class="button__text">登陆</span>
            </div>
            <div class="form-link">
                <div class="left">手机动态码登录</div>
                <div class="right">忘记密码</div>
            </div>
        </div>
        <div class="login-other">
            <div class="line">
                <span>其他方式登录</span>
            </div>
            <ul class="list">
                <li>
                    <img src="../../../assets/morefuc-wb.svg">
                    <span>微博</span>
                </li>
                <li>
                    <img src="../../../assets/morefuc-wx.svg">
                    <span>微信</span>
                </li>
                <li>
                    <img src="../../../assets/morefuc-qq.svg">
                    <span>QQ</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
    @import '../../../style/variable';
    .component-login{
        .header {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 1.5rem;
            height: 4.4rem;
            background: #EFEFF4;
            .left-view, .right-view{
                color: #36414B;
                font-size: 1.5rem;
                line-height: 1.5rem;
            }
            .left-view {
                display: flex;
                .icon{
                    width: 0.8rem;
                    height: 1.5rem;
                    margin-right: 0.6rem;
                }
            }
        }
        .login-form {
            .login-img {
                width: 8.8rem;
                height: 8.8rem;
                background: @color-white;
                border: 1px solid rgba(0, 0, 0, 0.1);
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                border-radius: 50%;
                padding: 1.5rem 1.6rem 2rem;
                margin: 3.3rem auto 4.4rem;
            }
            .form-input {
                padding: 0 1.5rem;
            }
            .form-submit {
                margin-top: 3.6rem;
                padding: 0 1.5rem;
                background-color: @color-white;
                .button__text {
                    padding: 1.2rem 0;
                    display: block;
                    background-color: #CE9940;
                    text-align: center;
                    font-size: 1.6rem;
                    color: @color-white;
                    border-radius: 0.3rem;
                }
            }
            .form-link {
                display: flex;
                justify-content: space-between;
                padding: 0 1.5rem;
                color: #7A7A7A;
                font-size: 1.2rem;
                line-height: 1.7rem;
                margin-top: 1.8rem;
            }
        }
        .login-other {
            .line {
                background-color: @color-white;
                color: #333E48;
                font-size: 1.2rem;
                text-align: center;
                padding: 1.6rem 0;
                margin-top: 8rem;
                span {
                    position: relative;
                }
                span:before {
                    width: 4.2rem;
                    height: 1px;
                    background-color: #D8D8D8;
                    content: ' ';
                    display: inline-block;
                    position: absolute;
                    top: 0.6rem;
                    left: -5rem;
                }
                span:after {
                    width: 4.2rem;
                    height: 1px;
                    background-color: #D8D8D8;
                    content: ' ';
                    display: inline-block;
                    position: absolute;
                    top: 0.6rem;
                    right: -5rem;
                }
            }
            .list {
                display: flex;
                justify-content: space-around;
                align-items: center;
                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    img {
                        border: 0;
                        width: 4.7rem;
                        height: 4.7rem;
                    }
                    span {
                        color: #888;
                        font-size: 1.1rem;
                        margin-top: 1.1rem;
                    }
                }
            }
        }
    }
</style>

<style lang="less">
    @import '../../../style/variable';
    .component-login{
        .login-form {
            .van-field {
                font-size: 1.5rem;
                padding: 1.4rem 0;
                border-bottom: 1px solid #eee;
            }
        }
    }
</style>

<script>
    import { Field } from 'vant';
    export default {
        components: {
            [Field.name]: Field,
        },
        data(){
            
            return {
                
            }
        },
        created(){
            this.$store.commit('hideNav', true);
        }
    }
</script>